<template>
  <div class="screen">
    <div class="video-container">
      <Video ref="video" :url="videoUrl" :options="videoOptions" />
    </div>
  </div>
</template>

<script>
import Video from '@/components/video.vue'

export default {
  components: {
    Video
  },

  data () {
    return {
      videoUrl: '',
      videoOptions: {
        //poster: '/assets/images/ocean.jpg', // 封面
      }
    }
  },

  mounted () {
    this.init()
  },

  methods: {
    init () {
      this.playVideo()
    },

    // 播放视频
    playVideo () {
      let data = {
        url: '/mock/videos/p5l3ki3mjtghm.mp4'
      }
      this.videoUrl = data.url
      this.$refs.video.play()
    }
  }
}
</script>

<style lang="less" scoped>
.video-container {
  width: 640px;
  height: 480px;
}
</style>
